<template>
	<view>
		<van-notify id="van-notify" />
		<van-dialog id="van-dialog" />
		<van-toast id="van-toast" />
		<van-cell-group>
			<van-field label="手机号" data-type="name" input-align="right" right-icon readonly :value="user.tel"
			 right-icon-class="right-icon-blank" />
			<van-field label="姓名" data-type="name" input-align="right" right-icon="edit" :value="user.name" @change="onChange" placeholder="请输入姓名" />
			<m-dept-field :show="userinfoTemp.zDept" @change="onChange"/>
			<!-- <van-cell title="系统角色" is-link :value="roleFull" @click="onShowRoleList" /> -->
			
			<van-field label="工号" data-type="jobNumber" input-align="right" right-icon="edit" :value="user.jobNumber" @change="onChange" placeholder="请输入工号" />
			<van-field label="验证码" data-type="vtfyCode" input-align="right" right-icon="edit" :value="user.vtfyCode" @change="onChange" placeholder="请输入验证码" />
			<!-- <van-cell title="验证码" :value="userinfo.vtfyCode"/> -->
		</van-cell-group>

		<!-- <view class="oper">
			<button type="primary" :plain="true" @click="submit" size="mini">{{isNewUser ? '提交申请' : '确认无误'}}</button>
		</view> -->
		
		<view class="oper">
			<button type="primary" :plain="true" @click="submit" size="mini">{{oper == 'checkfail' ? '重新申请' : '提交审核'}}</button>
		</view>

		<van-action-sheet :show="roleListVisibility" @close="onCloseRoleList">
			<m-titlebar title="角色选择" @confirm="onSelectRoles" @cancel="onCloseRoleList" :color="primaryColor">
				<view class="mtb-content">
					<van-checkbox-group :value="rolesTemp" @change="onChangeRole">
					  <van-checkbox v-for="item in roleList" :key="item.value" :checked-color="primaryColor" :name="item.value" custom-class="rc-cls">{{item.label}}</van-checkbox>
					</van-checkbox-group>
					
		
				</view>
			</m-titlebar>
		</van-action-sheet>
	</view>
</template>

<script>
	
	import Notify from '@/wxcomponents/notify/notify'
	import Dialog from '@/wxcomponents/dialog/dialog'
	import Toast from '@/wxcomponents/toast/toast'
	import utils from '@/common/utils.js'
	export default {
		data() {
			return {
				roleList:[],
				roles: [],
				rolesTemp: [],
				roleListVisibility: false,
				primaryColor:null,
				user:{
					role: 'user'
				},
				oper: '',
				deptNameTemp:'',
				userinfoTemp: {}
			};
		},
		onLoad:async function(options) {
			this.oper = options.oper
			this.primaryColor = getApp().globalData.primaryColor
			this.user = Object.assign({}, this.user, {tel: options.tel,smscode: options.tel})
			
			
			try{
				const rs = await this.getRoles()
				this.roleList = rs.filter(o => o.value != 'driver' && o.value != 'controller')
				
				console.log(this.oper)
				if(this.oper == 'checkfail'){
					const userinfoTemp = await this.getUserDetail()
					const rt = userinfoTemp.roles
					const inx = rt.indexOf('user')
					rt.splice(inx, 1)
					if(rt.length == 0){
						rt == ['user']
					}
					this.roles = rt
					this.rolesTemp = rt
					
					console.log(rt)
					// userinfoTemp.zRoles = this.roleList.filter(o => userinfoTemp.roles.includes(o.value)).map(o => o.lable).join(',')
					userinfoTemp.zDept = this.getDeptName(userinfoTemp.partment)
					this.userinfoTemp = userinfoTemp
					this.user = this.user = Object.assign({}, this.user, {name: userinfoTemp.name, role: rt[0], partmentId: userinfoTemp.partment.partmentId})
				}
			}catch(e){
				//TODO handle the exception
			}
			
			const _this = this
			uni.login({
				success(loginObj) {
					_this.user.wxcode = loginObj.code
				}
			})
			
			if(this.oper == 'checkfail'){
				
			}
			
		},
		methods: {
			async getRoles(){
				return await utils.req('/config/getRoles',{token:'1'})
			},
			async getUserDetail(){
				return await utils.req('/user/getUserDetail', {tel: this.user.tel})
			},
			getDeptName(obj){
				this.deptNameTemp = `${obj.name}-${this.deptNameTemp}`
				if(obj.up){
					return this.getDeptName(obj.up)
				}else{
					return this.deptNameTemp.substring(0, this.deptNameTemp.lastIndexOf('-'))
				}
			},
			onChange(event){
				console.log(event)
				const type = event.currentTarget.dataset.type
				if(type == 'name'){
					this.user.name = event.detail
				}
				if(type == 'roles'){
					this.user.role = event.detail[0]
				}
				if(type == 'dept'){
					if(event.detail.dept2){
						this.user.partmentId = event.detail.dept2.partmentId
					}else{
						this.user.partmentId = event.detail.dept1.partmentId
					}
				}
				if(type == 'jobNumber'){
					this.user.jobNumber = event.detail
				}
				if(type == 'vtfyCode'){
					this.user.vtfyCode = event.detail
				}
				
			},
			onShowRoleList() {
				this.roleListVisibility = true
			},
			onCloseRoleList() {
				this.roleListVisibility = false
			},
			onSelectRoles() {
				this.roles = this.rolesTemp
				this.onCloseRoleList()
				this.onChange({detail: this.roles, currentTarget: {dataset: {type: 'roles'}}})
			},
			onChangeRole(event){
				console.log(event.detail)
				if(event.detail.length == 0){
					this.rolesTemp = []
				}else{
					this.rolesTemp = [event.detail[event.detail.length - 1]]
				}
			},
			async submit(){
				try{
					if(!this.user.name || !this.user.role || !this.user.partmentId){
						Toast('信息不完整，请检查')
						return
					}
					await utils.req('/wxuser/regist',this.user)
					Dialog.alert({
					  title: '标题',
					  message: '提交成功，等待审核通过'
					}).then(() => {
					  uni.reLaunch({
					  	url:'../login-main/login-main'
					  })
					});
				}catch(e){
					
				}
			}
		},
		computed: {
			roleFull() {
				if (this.roles.length === 0) {
					return "请选择角色"
				}
				return this.roleList.filter(o => this.roles.includes(o.value)).map(o => o.label).join(',')
			}
		}
	}
</script>

<style lang="scss">
	.oper {
		display: flex;
		justify-items: center;
		margin-top: 200rpx;

		button {
			padding: 6rpx 130rpx;
		}
	}
	.mtb-content{
		display: flex;
		flex-flow: column;
		align-items: center;
		padding: 10px 0;
	}
	.rc-cls{
		margin: 10px 0;
	}
</style>
